﻿<!DOCTYPE html>

<html>
<head>
    <title>图片上传与区域检测</title>
    <style>
        #imageContainer {
            position: relative;
            display: inline-block;
        }

        #uploadedImage {
            width: 100%;
            height: auto;
        }

        .leftDiv {
        }
    </style>
</head>
<body>
    <h1>上传图片并检测空白区域</h1>
    <div class="leftDiv">
        <input type="file" id="fileInput" />
        <p id="desc"></p>
    </div>
    <div id="imageContainer">
        <img id="image" src="" alt="上传图片" onclick="onImageClick(event)" />
        <img id="uploadedImage" src="" alt="" />
    </div>

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
    <script>

        //获取点击图片的位置
        function onImageClick(event) {
            var img = document.getElementById("image");
            var rect = img.getBoundingClientRect();
            var x = event.clientX - rect.left;
            var y = event.clientY - rect.top;

            var url = img.src;
            // 使用 URL 对象来解析该 URL
            let parsedUrl = new URL(url);
            // 获取路径部分（去掉域名和端口号）
            let path = parsedUrl.pathname;
            //获取图片路径（如果是本地上传的文件路径，可以通过 FileReader 获取）
            var imagePath = path;

            // If image is a data URL, you cannot send that directly, so we will assume it's the actual path
            if (imagePath.indexOf('data:image') === 0) {
                alert('Image is uploaded as a base64 string, please upload again with proper file path.');
                return;
            }

            //发送坐标和图片路径到后端
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/Home/GetRegion", true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = JSON.parse(xhr.responseText);
                    var point = "(" + result.Vertices[0].X + "," + result.Vertices[0].Y + ")"
                    var point1 = "(" + result.Vertices[1].X + "," + result.Vertices[1].Y + ")"
                    var point2 = "(" + result.Vertices[2].X + "," + result.Vertices[2].Y + ")"
                    var point3 = "(" + result.Vertices[3].X + "," + result.Vertices[3].Y + ")"
                    var point4 = "(" + result.Vertices[4].X + "," + result.Vertices[4].Y + ")";

                    var thtml = "最大空白区域像素数量：" + result.Count + "，\r\n"
                        + "最大空白区域面积：" + result.Area + ", \n\r"
                        + "点击点坐标：" + point + "， \n\r"
                        + "顶点：\r\n左上：" + point1 + "，右上：" + point2 + "，\r\n左下：" + point4 + "，右下：" + point3;

                    desc.innerHTML = thtml;
                    alert(thtml);
                }
            };
            xhr.send(JSON.stringify({ x: x, y: y, imagePath: imagePath }));
        }


        //处理图片上传
        document.getElementById("fileInput").addEventListener("change", function (e) {
            const formData = new FormData();
            var file = e.target.files[0];
            if (file) {
                formData.append('file', file);

                //上传图片到服务器
                $.ajax({
                    url: "/Home/UploadImage",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        const imgElement = document.getElementById("image");
                        imgElement.src = res.imagePath;//获取并显示上传的文件路径
                    },
                    error: function (xhr, status, error) {
                        console.log("error uploading image: ", error);
                    }
                });
            }
        });

    </script>
</body>
</html>